<template>
  <div
    class="container d-flex justify-content-center align-items-center vh-100"
  >
    <div class="col-11 col-sm-8 col-lg-6 col-xl-4 col-xxl-4">
      <form class="border shadow-sm rounded p-4">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">用户名：</label>
          <input
            type="email"
            :class="['form-control', { 'is-invalid': loginInfo.usernameMsg }]"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            v-model="loginInfo.username"
          />
          <div class="invalid-feedback">
            {{ loginInfo.usernameMsg }}
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">密码：</label>
          <input
            type="password"
            :class="['form-control', { 'is-invalid': loginInfo.passwordMsg }]"
            id="exampleInputPassword1"
            v-model="loginInfo.password"
          />
          <div class="invalid-feedback">
            {{ loginInfo.passwordMsg }}
          </div>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1" />
          <label class="form-check-label" for="exampleCheck1">记住我</label>
        </div>
        <div class="d-flex flex-column align-items-center px-1">
          <button
            type="submit"
            class="btn btn-primary w-100 mb-2 text-light"
            @click="submit()"
          >
            登录
          </button>
          <router-link
            to="/reg"
            class="border rounded w-100 text-decoration-none text-center"
          >
            <button type="submit" class="btn">注册</button>
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
// import axios from "@/utils/axios";

export default defineComponent({
  setup() {
    const router = useRouter();

    const loginInfo = reactive({
      username: "",
      password: "",
      usernameMsg: computed(() => {
        // 验证必须填入邮箱格式
        if (!loginInfo.username) {
          return "用户名不能为空";
        }
        if (
          !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
            loginInfo.username
          )
        ) {
          return "用户名格式不正确，必须为有效的邮箱地址";
        }
        return "";
      }),
      passwordMsg: computed(() => {
        if (!loginInfo.password) {
          return "密码不能为空";
        }
        if (loginInfo.password.length < 6) {
          return "密码长度不能小于6";
        }
        return "";
      }),
    });
    const submit = () => {
      // console.log(loginInfo);
      router.push("/home");
    };
    return {
      loginInfo,
      submit,
    };
  },
});
</script>

<style scoped></style>
